Js文件操作

2018.6.28 星期四

文件对象(blob) 和下载

### [blob和base64]：
Blob对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。

File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。

### 下载
blobDownload.html/blobDownload-html&txt.html

文件下载

sheetjs: https://github.com/SheetJS/sheetjs
FileSaver.js: https://github.com/eligrey/FileSaver.js/

导出的表格会把字符串处理为数字：包括小数点后，或数字前后的00，百分比等。
解决：添加参数{ raw: true }

element-ui 的表格是两个表格（表头和内容）两块区域

1 2	npm install xlsx --save npm install file-saver --save

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

//导出Excel
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content'),  { raw: true }); //此处传入table的DOM节点
    let etout = XLSX.write(et, { 
    	bookType: 'xlsx', 
    	bookSST: true, 
    	type: 'array' 
    });
    try {
    	FileSaver.saveAs(new Blob([etout], { 
    		type: 'application/octet-stream' 
    	}), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
}

图片下载

图片下载href 所指向的地址，必须与当前网站同源，否则会打开图片。
在 HTML5 中，download 属性是 <a> 标签的新属性。
移动端好像不行

<!–
浏览器已经限制死跨域下载多媒体文件的各种方式。
最正规的办法还是让后端做一次转发。请求后端，后端向第三方请求文件，返回给前端，前端保存文件。

测试用的是谷歌浏览器,最后解决了,有两种办法一种是前端把图片转成base64,还有一种是后台读取图片然后write到前台
header(‘Content-type: octet/stream’);
header(‘Content-disposition: attachment; filename=’.$file);

filesave.js

javascript实现点击下载图片
方法二:<iframe>标签.生成iframe,src指向图片地址,调用document.execCommand(“SaveAs”)方法.

前端实现图片下载
但是这里不推荐：
document.execCommand(‘SaveAs’) 中 SaveAs 是个非标准值，主要用来兼容 ie 不支持 <a> 标签 download 属性的场景
window.frames[“iframeName”].document 受到同源策略的影响，如果图片地址跨域，是无法访问的 <frame> 的属性和方法
–>

图片上传

resumable.js+bootstrap-progressbar.js

Alternatives
If your aim is just to support progress indications during upload/uploading multiple files at once, Resumable.js isn’t for you. In those cases, something like Plupload provides the same features with wider browser support.

jQuery-File-Upload

SMTC

其它：
Plupload

大文件/断点续传

[大文件上传和断点续传]

读取本地文件

需要input标签打开文件才可以
FileSystemObject 对象，没有试用过：创建新对象都不通过
websocket可以；cef等

# 使用javascript读写本地文件的方法

【方法一】localStorage
【方法二】execCommand(“saveas”)
【方法三】File API
<!–
# JS读取本地文件及目录的方法
一、功能实现核心：FileSystemObject 对象
二、FileSystemObject编程三部曲
使用FileSystemObject 对象进行编程很简单，一般要经过如下的步骤：创建FileSystemObject对象、应用相关方法、访问对象相关属性。
(一)创建FileSystemObject对象
var fso = new ActiveXObject(“Scripting.FileSystemObject”);
上述代码执行后，fso就成为一个FileSystemObject对象实例。

(二)应用相关方法
创建对象实例后，就可以使用对象的相关方法了。比如，使用CreateTextFile方法创建一个文本文件：
var fso = new ActiveXObject(“Scripting.FileSystemObject”);
var f1 = fso.createtextfile(“c://myjstest.txt”,true”);

(三)访问对象相关属性
要访问对象的相关属性，首先要建立指向对象的句柄，这就要通过get系列方法实现：GetDrive负责获取驱动器信息，GetFolder负责获取文件夹信息，GetFile负责获取文件信息。比如，指向下面的代码后，f1就成为指向文件c:/test.txt的句柄：

var fso = new ActiveXObject(“Scripting.FileSystemObject”);
var f1 = fso.GetFile(“c://myjstest.txt”);
–>